<template>
  <!-- 输入邀请码 -->
  <!-- 弹框输入邀请码 -->
  <van-popup round :show="showInvterCode" :style="{ width: '90%' }">
    <div class="invite-box">
      <div class="p_text">输入邀请码</div>
      <div class="input_box">
        <!-- 密码输入框 -->
        <van-password-input
          :length="6"
          :value="code"
          :gutter="10"
          :mask="false"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
      </div>
      <van-button @click="handleConfirm">
        <p>确认</p>
      </van-button>
    </div>
  </van-popup>
  <!-- 弹出键盘 -->
  <div class="keybox">
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="code"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script setup>
import { showToast } from "vant";
import { ref } from "vue";

const props = defineProps({
  // 输入弹框显示与隐藏
  show: {
    type: Boolean,
    default: false,
  },
  // 输入得邀请码
  inviteCode: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["update:show", "confirm"]);
// 先是内部的变量
// 输入弹框显示与隐藏
const showKeyboard = ref(false);
// 子组件内部得show
const showInvterCode = ref(props.show);
const code = ref(props.inviteCode);

// 监听props.show变化
watch(
  () => props.show,
  (val) => {
    showInvterCode.value = val;
    if (val) {
      // 弹窗显示时重置输入
      code.value = props.initialCode;
    }
  }
);
// 监听内部show变化
watch(showInvterCode, (val) => {
  emit("update:show", val);
});
// 确认按钮点击事件
const handleConfirm = () => {
  if (code.value.length >= 6) {
    emit("confirm", code.value.slice(0, 6));
    showInvterCode.value = false;
  } else {
    // 可以添加提示
    showToast("请输入至少6位");
  }
};
</script>

<style scoped lang="less">
@primary-color: rgba(139, 172, 246, 1); // Tailwind's primary color (blue-500)
@secondary-color: #ef4444; // Tailwind's secondary color (red-500)
@background-color: #f8fffc;
@background-input: rgba(249, 207, 79, 0.3); // Tailwind's gray-300
// 弹框

.invite-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 0px;
  .p_text {
    text-align: center;
    font-size: 18px;
    color: #165f4c;
    font-weight: bold;
  }

  .input_box {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    :deep(.van-password-input) {
      margin: 0;
      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;

        li {
          width: 44px;
          height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: @background-input;
          border-radius: 8px;

          input {
            text-align: center;
            width: 44px;
            height: 30px;
            border: 0;
            background-color: transparent;
            transition: all 0.3s;
          }
        }
      }
    }
  }

  .van-button {
    width: 140px;
    height: 44px;
    background: linear-gradient(158deg, #31dfb0 0%, #0fc68a 100%);

    color: white;
    box-shadow: 0px 0px 1px 3px rgba(2, 232, 155, 0.5);
    border-radius: 52px;

    p {
      font-size: 18px;
      color: #fff;
    }
  }
}

.keybox {
  position: relative;
  z-index: 10000;
}
</style>
<style>
.van-toast {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
}
</style>
